<template>
    <el-container>
        <!--        <el-header style="background-color: #F6FBFF;text-align: center;align-content: center;height: 50px">-->
        <!--            <div STYLE="font-size:20px">药友制药</div>-->
        <!--            <div STYLE="font-size:12px">YAOPHARMA</div>-->
        <!--        </el-header>-->
        <el-main style="background-color:#ffffff;">
            <el-row :gutter="10" style="height: 100%">
                <el-col :span="5">
                    <el-card class="box-card">
                        <div slot="header">
                            <span>用电总消耗(kWh)</span>
                        </div>
                        <div id="today" style="width:330px;height:250px;"></div>
                        <div id="month" style="width:330px;height:250px;"></div>
                        <div id="year" style="width:330px;height:250px;"></div>
                    </el-card>
                </el-col>

                <el-col :span="5" class="myclass">
                    <el-card class="box-card">

                        <el-card class="box-card">
                            <div slot="header">
                                <span>水总消耗(T)</span>
                            </div>
                            <div id="water" style="width:330px;height:220px;"></div>
                        </el-card>
                        <el-card class="box-card ">
                            <div slot="header">
                                <span>燃气总用量(Nm3)</span>
                            </div>
                            <div id="gas" style="width:330px;height:220px;"></div>
                        </el-card>
                        <el-card class="box-card">
                            <div slot="header">
                                <span>制冷总量(T)</span>
                            </div>
                            <div id="cold" style="width:330px;height:220px;"></div>
                        </el-card>
                    </el-card>

                </el-col>

                <el-col :span="10">
                    <el-card class="box-card">
                        <div slot="header" style="text-align: center">
                            <span>园区分布地图</span>
                        </div>
                        <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080px"
                                   @click="getClickInfo" :scroll-wheel-zoom='true'>
                        </baidu-map>
                    </el-card>
                </el-col>
                <el-col :span="4">
                    <el-card class="box-card">
                        <div slot="header">
                            <span>容载比</span>
                        </div>
                        <div id="today_r" style="width:264px;height:250px;"></div>
                        <div id="month_r" style="width:264px;height:250px;"></div>
                        <div id="year_r" style="width:264px;height:250px;"></div>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>
<script>
    import MapPage from '../home/components/map.vue'

    export default {
        components: {
            MapPage
        },
        data() {
            return {

                center: {lng: 106.516405, lat: 29.627049},
                zoom: 13
            }
        }, methods: {

            handler({BMap, map}) {
                var point = new BMap.Point(106.516405, 29.627049)
                map.centerAndZoom(point, 13)
                var marker = new BMap.Marker(point) // 创建标注
                map.addOverlay(marker) // 将标注添加到地图中
                var circle = new BMap.Circle(point, 6, {
                    strokeColor: 'Red',
                    strokeWeight: 6,
                    strokeOpacity: 1,
                    Color: 'Red',
                    fillColor: '#f03'
                })
                map.addOverlay(circle)
            },
            getClickInfo(e) {
                console.log(e.point.lng)
                console.log(e.point.lat)
                this.center.lng = e.point.lng
                this.center.lat = e.point.lat
            }

        }, mounted() {

            // 基于准备好的dom，初始化echarts实例
            const myChart = this.$echarts.init(document.getElementById('today'),'wonderland');

            // 指定图表的配置项和数据
            let option = {
                title: {
                    text: '今日耗电量',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    // orient: 'vertical',
                    bottom: 20,
                    data: ['园区A', '园区B', '园区C', '园区D']
                },
                series: [
                    {
                        name: '用电量',
                        type: 'pie',
                        radius: ['20%', '50%'],
                        center: ['50%', '40%'],
                        data: [
                            {value: 3.33, name: '园区A'},
                            {value: 3.15, name: '园区B'},
                            {value: 3.05, name: '园区C'},
                            {value: 3.81, name: '园区D'},
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                padding: [0, 0],
                                formatter: '{a}: {c} \n 占比:({d}%)'
                            }
                        },
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


            //本月
            // 基于准备好的dom，初始化echarts实例
            const myChart1 = this.$echarts.init(document.getElementById('month'));

            // 指定图表的配置项和数据
            let option1 = {
                title: {
                    text: '本月耗电量',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    // orient: 'vertical',
                    bottom: 20,
                    data: ['园区A', '园区B', '园区C', '园区D']
                },
                series: [
                    {
                        name: '用电量',
                        type: 'pie',
                        radius: ['20%', '50%'],
                        center: ['50%', '40%'],
                        data: [
                            {value: 100.5, name: '园区A'},
                            {value: 80.58, name: '园区B'},
                            {value: 101.5, name: '园区C'},
                            {value: 90.55, name: '园区D'},
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                padding: [0, 0],
                                formatter: '{a}: {c} \n 占比:({d}%)'
                            }
                        },
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option1);


            // 基于准备好的dom，初始化echarts实例
            const myChart2 = this.$echarts.init(document.getElementById('year'));

            // 指定图表的配置项和数据
            let option2 = {
                title: {
                    text: '本年耗电量',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    // orient: 'vertical',
                    bottom: 20,
                    data: ['园区A', '园区B', '园区C', '园区D']
                },
                series: [
                    {
                        name: '用电量',
                        type: 'pie',
                        radius: ['20%', '50%'],
                        center: ['50%', '40%'],
                        data: [
                            {value: 3.33, name: '园区A'},
                            {value: 3.15, name: '园区B'},
                            {value: 3.05, name: '园区C'},
                            {value: 3.81, name: '园区D'},
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                padding: [0, 0],
                                formatter: '{a}: {c} \n 占比:({d}%)'
                                // formatter: function (params) {
                                //     return  "用电量:"+params.value +"\n"+
                                //         "占比:"
                                // }
                            }
                        },
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart2.setOption(option2);


            // 基于准备好的dom，初始化echarts实例
            const myChart3 = this.$echarts.init(document.getElementById('water'));

            // 指定图表的配置项和数据
            let option3 = {
                tooltip: {
                    trigger: 'axis',
                    formatter: '',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    bottom: 0,
                    data: ['园区A', '园区B', '园区C', '园区D']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '12%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['今日', '本月', '本年']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '园区A',
                        type: 'bar',
                        barWidth: 35,
                        stack: '总量',
                        data: [8.3, 25.5, 280]
                    },
                    {
                        name: '园区B',
                        type: 'bar',
                        stack: '总量',
                        data: [8.5, 30.5, 260]
                    },
                    {
                        name: '园区C',
                        type: 'bar',
                        stack: '总量',
                        data: [8.7, 24.5, 250]
                    },
                    {
                        name: '园区D',
                        type: 'bar',
                        stack: '总量',

                        data: [9.2, 35.6, 280]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart3.setOption(option3);


            // 基于准备好的dom，初始化echarts实例
            const myChart4 = this.$echarts.init(document.getElementById('gas'));

            // 指定图表的配置项和数据
            let option4 = {
                tooltip: {
                    trigger: 'axis',
                    formatter: '',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    bottom: 0,
                    data: ['园区A', '园区B', '园区C', '园区D']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '12%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['今日', '本月', '本年']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '园区A',
                        type: 'bar',
                        barWidth: 35,
                        stack: '总量',
                        data: [8.3, 25.5, 280]
                    },
                    {
                        name: '园区B',
                        type: 'bar',
                        stack: '总量',
                        data: [8.5, 30.5, 260]
                    },
                    {
                        name: '园区C',
                        type: 'bar',
                        stack: '总量',
                        data: [8.7, 24.5, 250]
                    },
                    {
                        name: '园区D',
                        type: 'bar',
                        stack: '总量',
                        data: [9.2, 35.6, 280]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart4.setOption(option4);


            // 基于准备好的dom，初始化echarts实例
            const myChart5 = this.$echarts.init(document.getElementById('cold'));

            // 指定图表的配置项和数据
            let option5 = {
                tooltip: {
                    trigger: 'axis',
                    formatter: '',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    bottom: 0,
                    data: ['园区A', '园区B', '园区C', '园区D']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '12%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['今日', '本月', '本年']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '园区A',
                        type: 'bar',
                        barWidth: 35,
                        stack: '总量',
                        data: [8.3, 25.5, 280]
                    },
                    {
                        name: '园区B',
                        type: 'bar',
                        stack: '总量',
                        data: [8.5, 30.5, 260]
                    },
                    {
                        name: '园区C',
                        type: 'bar',
                        stack: '总量',
                        data: [8.7, 24.5, 250]
                    },
                    {
                        name: '园区D',
                        type: 'bar',
                        stack: '总量',
                        data: [9.2, 35.6, 280]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart5.setOption(option5);


            // 基于准备好的dom，初始化echarts实例
            const myChart6 = this.$echarts.init(document.getElementById('today_r'));

            // 指定图表的配置项和数据
            let option6 = {
                title: {
                    text: '今日',
                    subtext: '单位:%',
                    left: 'left'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '12%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c}% '
                },
                legend: {
                    // orient: 'vertical',
                    bottom: 20,
                    data: ['园区A', '园区B', '园区C', '园区D']
                },
                xAxis: {
                    type: 'value',
                    max: 100
                },
                yAxis: {
                    type: 'category',
                    data: ['园区A', '园区B', '园区C', '园区D']
                },
                series: [{
                    data: [80, 60, 56, 78],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart6.setOption(option6);


            // 基于准备好的dom，初始化echarts实例
            const myChart7 = this.$echarts.init(document.getElementById('month_r'));

            // 指定图表的配置项和数据
            let option7 = {
                title: {
                    text: '本月',
                    subtext: '单位:%',
                    left: 'left'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '12%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c}% '
                },
                legend: {
                    // orient: 'vertical',
                    bottom: 20,
                    data: ['园区A', '园区B', '园区C', '园区D']
                },
                xAxis: {
                    type: 'value',
                    max: 100
                },
                yAxis: {
                    type: 'category',
                    data: ['园区A', '园区B', '园区C', '园区D']
                },
                series: [{
                    data: [80, 60, 56, 78],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart7.setOption(option7);


            // 基于准备好的dom，初始化echarts实例
            const myChart8 = this.$echarts.init(document.getElementById('year_r'));

            // 指定图表的配置项和数据
            let option8 = {
                title: {
                    text: '本年',
                    subtext: '单位:%',
                    left: 'left'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '12%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c}% '
                },
                legend: {
                    // orient: 'vertical',
                    bottom: 20,
                    data: ['园区A', '园区B', '园区C', '园区D']
                },
                xAxis: {
                    type: 'value',
                    max: 100
                },
                yAxis: {
                    type: 'category',
                    data: ['园区A', '园区B', '园区C', '园区D']
                },
                series: [{
                    data: [80, 60, 56, 78],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart8.setOption(option8);


        }
    }
</script>

<style lang="scss" scoped>

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        height: 100%;
    }

    .el-col {
        height: 100% !important;
    }

    .el-container {
        height: 100% !important;
    }

    .el-card {
        height: 100% !important;
    }


</style>

<style>
    .el-card__header {
        padding: 10px 10px !important;
    }

    .myclass .el-card__body {
        height: 260px;
        padding: 0px !important;
    }

    .el-card__body {
        padding: 0px !important;
    }



</style>
